<template>
  <div>
    <BasicForm @register="registerForm" @submit="handleSubmit" :class="prefixCls"> 
      <template #formFooter>
        <a-button :class="prefixCls + '-submit'" @click="handleSubmit" type="primary" :loading="loading" style="margin-right: 0.9rem">
          保存
        </a-button>
      </template>
    </BasicForm>
    <VerifyModal @register="registerVerifyModal" :submitCallback="handleSubmitVerify"/>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { BasicForm } from '/@/components/Form/index';
import { VerifyModal }  from '/@/components/BizVerify';
import { useConfigForm, ConfigFormProps } from '/@/views/system/configCenter/hooks/useConfigForm'
import { useDesign } from '/@/hooks/web/useDesign';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { useModal } from '/@/components/Modal';
import { BizType } from '/@/api/sys/model/msgPushModel';

const emit = defineEmits(['query-success'])

const { prefixCls } = useDesign('config-sms')
const attrs : any = useAttrs({ excludeDefaultKeys: false });
const { formSchema, configKey } = attrs.value
console.log('configKey: ', configKey);

const configFromProps : ConfigFormProps = {
  configKey: configKey,
  schemas: formSchema,
  labelWidth: 120
}
const [registerVerifyModal, { openModal: openVerifyModal }] = useModal();
const { 
  registerForm, handleSubmit, loading, isSensitive, handleSensitiveConfig 
} = useConfigForm(configFromProps, emit)

const handleSubmitVerify = async (data) => {
  await handleSensitiveConfig(data)
}
</script>


<style lang="less" scoped>
@import '../../style.less';
@prefix-cls: ~'@{namespace}-config-sms';
.@{prefix-cls} {
  width: 750px;
  &-submit {
    margin-left: 120px;
  }
}
</style>../useConfigForm